<!--
 * @Author: 夏郑兴 971348024@qq.com
 * @Date: 2023-03-01 15:05:22
 * @LastEditors: 夏郑兴 971348024@qq.com
 * @LastEditTime: 2023-03-01 15:08:58
 * @FilePath: /szls-gitee-project/Users/xzx/Desktop/szls/starter-3/error.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="error-center">
	  <n-result
		:status="`${errorObj.statusCode}`"
		:title="`${errorObj.statusCode}`"
		:description="errorObj.message"
	  >
		<template #footer>
			<div class="detail">{{props.error.message}}</div>
		  <n-button @click="handleError">返回首页</n-button>
		</template>
	  </n-result>
  </div>
</template>
<script setup>
import { NResult, NButton } from "naive-ui";
const props = defineProps({
  error: Object
})
const handleError = () => clearError({ redirect: '/' })
const errorObj = reactive({
	statusCode: 500,
	message:'服务异常',
	statusMessage: ''
})
onMounted(() => {
	console.log('出现异常：')
	console.log(props.error)
	errorObj.statusCode = Number(props.error.statusCode)
	errorObj.statusMessage = props.error.statusMessage
	switch (errorObj.statusCode){
		case 404:
			errorObj.message = '找不到此页面!'
			break;
		case 500:
			errorObj.message = '服务异常!'
			break;
		case 403:
			errorObj.message = '禁止访问!'
			break;
		default:
			break;
	}
	
})
</script>

<style>
	.error-center{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		.detail{
			padding: 20px;
			background: #eee;
			font-size: 14px;
			margin-bottom: 20px;
			border-radius: 10px;
		}
	}
</style>